:root {
    --numDays: 5;
    --numHours: 10;
    --timeHeight: 60px;
    --calBgColor: #fff1f8;
    --eventBorderColor: #f2d3d8;
    --eventColor1: #ffd6d1;
    --eventColor2: #fafaa3;
    --eventColor3: #e2f8ff;
    --eventColor4: #d1ffe6;
}

.calendar {
    display: grid;
    /*gap: 10px;*/
    grid-template-columns: auto 1fr;
    margin: 2rem;
}


.spacer {
    border-right: 1px solid rgba(221,221,221,.6);
}

.days {
    display: grid;
    /*grid-column: 2;*/
    /*gap: 5px;*/
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /*grid-template-columns: repeat(7,1fr);*/
    grid-template-rows: repeat(var(--numHours), var(--timeHeight));/**/

}

.day{

    display: flex;
    justify-content: center;
    border-right: 1px solid rgba(221,221,221,.6);
    font-family: Oswald;
    color: #EE7D45;
    font-size: 18px;
    font-weight: bold;
}
.day .date-today{
    color: #3b58a2;
    border-bottom: #3B58A2;
    border-bottom-width: 2px;
}
.day .date-off{
    color: #E83A68;
    border-bottom: #3B58A2;
}

.timeline {
    display: grid;
    /*gap: 5px;*/
    grid-template-rows: repeat(var(--numHours), var(--timeHeight));
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}


.time-marker{
    display: flex;
    justify-content: center;
    align-content: center;
    border-top: 1px solid rgba(221,221,221,.6);
    border-right: 1px solid rgba(221,221,221,.6);
    color: #333;

}

.time-free{
    border-top: none;
    border-right: 1px solid rgba(221,221,221,.6);
}

.time-marker p{
    margin-right: 10px;
}



.time-now p{
    color:#3b58a2;
    font-weight: bold;
    font-size: 18px;
}



.events{
    display: grid;
    grid-template-rows: repeat(var(--numHours), var(--timeHeight));
    border-radius: 5px;
    background: var(--calBgColor);
}

.hourMarks{
    /*border-top:  blue 1px dashed;
    border-bottom:  blue 1px dashed;*/
    border-top: 1px solid rgba(221,221,221,.6);
}
.daysMarks{
    /*border-right:  blue 1px dashed;
    border-left:  blue 1px dashed;*/
    border-right: 1px solid rgba(221,221,221,.6);
}
.currentHour{
    border-top:  blue 2px dashed;
    position: relative;
    top: calc(var(--timeHeight) / 2);
}
.currentHour p{
    position: relative;
    /*display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    */
    top: calc(-1*var(--timeHeight) / 2);
    left: 12px;
}

.currentHour:before {
    background: #ea4335;
    border-radius: 50%;
    content: "";
    position: absolute;
    height: 12px;
    margin-top: -7px;
    width: 12px;
    pointer-events: none;
}
/* Event*/

.event {
    border: 1px solid var(--eventBorderColor);
    border-radius: 5px;
    padding: 0.5rem;
    margin: 0 0.5rem;
    background: white;
    display: flex;
    /*flex-wrap: wrap;*/
    flex-direction: column;
    align-content: center;
    /*justify-content: space-around;*/
}
.title {
    font-weight: 600;
    margin-bottom: 0.25rem;

}
.space, .date {
    height: 60px
}
body {
    font-family: system-ui, sans-serif;
}

.corp-fi {
    background: var(--eventColor1);
}

.ent-law {
    background: var(--eventColor2);
}

.writing {
    background: var(--eventColor3);
}

.securities {
    background: var(--eventColor4);
}

.date {
    //display: flex;
    gap: 1em;
}

.date-num {
    font-size: 3rem;
    font-weight: 600;
    display: inline;
    margin-right: 10px;
    margin-left: 10px;
}

.date-day {
    display: inline;
    font-size: 3rem;
    font-weight: 100;
}